<template>
  <div class="container">
    <el-page-header
      @back="goBack"
      title="套餐管理"
      style="padding: 10px 20px"
    />
    <el-form :model="mealForm" style="margin: 20px">
      <el-form-item label="套餐名称">
        <el-input
          size="small"
          style="width: 214px"
          v-model="mealForm.comboName"
          placeholder="请输入套餐名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="食堂信息">
        <el-select
          @change="changeCanteen"
          v-model="mealForm.canteen"
          class="m-2"
          placeholder="请选择食堂"
          size="small"
        >
          <el-option
            v-for="item in canteenOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="套餐餐标">
        <el-select
          v-model="mealForm.comboPriceId"
          class="m-2"
          placeholder="请选择餐标价格"
          size="small"
        >
          <el-option
            v-for="item in mealOptions"
            :key="item.priceId"
            :label="item.price"
            :value="item.priceId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="套餐详情">
        <MyEditor
          ref="editorMeal"
          :value="mealForm.comboImage"
          v-model="mealForm.comboImage"
        ></MyEditor>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="submit">提交</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import {
  canteenList,
  mealOption,
  addMeal,
  mealInfo,
  updateMeal,
} from "@/api/canteen/meal";
//引入富文本编辑器组件
import MyEditor from "@/components/MyEditor";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
function goBack() {
  router.back();
}
//食堂数据
const canteenOptions = ref([]);
//表单数据
const mealForm = ref({});
//获取食堂数据
function getCanteenList() {
  canteenList().then((res) => {
    canteenOptions.value = res.data;
  });
}
//餐标数据
const mealOptions = ref([]);
//下拉框改变事件
function changeCanteen(val) {
  mealForm.value.comboPriceId = "";
  mealOption({
    canteenId: val,
  }).then((res) => {
    mealOptions.value = res.data;
  });
}
//富文本编辑器标识
const editorMeal = ref(null);
//提交表单数据
function submit() {
  if (mealId.value === undefined) {
    addMeal({
      comboName: mealForm.value.comboName,
      comboPriceId: mealForm.value.comboPriceId,
      comboImage: editorMeal.value.textContent,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("添加成功");
        router.back();
      }
    });
  } else {
    updateMeal(mealId.value, {
      comboName: mealForm.value.comboName,
      comboPriceId: mealForm.value.comboPriceId,
      comboImage: editorMeal.value.textContent,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
        router.back();
      }
    });
  }
}
//取消
function cancel() {
  mealForm.value = {};
  router.back();
}
const mealId = ref("");
//通过ID获取详情
function getMealInfo() {
  mealInfo(mealId.value).then((res) => {
    mealForm.value = res.data;
    mealForm.value.canteen = res.data.comboCanteenId * 1;
    mealOption({
      canteenId: mealForm.value.canteen,
    }).then((res) => {
      mealOptions.value = res.data;
      console.log(mealOptions.value);
    });
  });
}
onMounted(() => {
  getCanteenList();
  mealId.value = route.query.id;
  if (mealId.value !== undefined) {
    getMealInfo();
  }
});
</script>

<style scoped lang="scss">
.container {
  margin-top: 20px;
  height: calc(100vh - 200px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
}
</style>
